<template>
    <div class="goods">
        <van-nav-bar
            title="乐购商城"
            left-text=""
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="fixed-btns-box" @click="carts">
            <div class="fiexd-cart">
                <img src="../assets/imgs/icon/cart@top.png" alt="">
                <span>{{num}}</span>
            </div>
        </div>
        <div class="detail-topic-img">
            <img :src="goods.main_img_url" alt="">
        </div>
        <div class="cart-box">
            <div class="product-counts"
            readonly
            clickable
            :value="value"
            @click="showPicker = true"
            >
                <span>数量</span>
                <span>{{this.value}}</span>
                <img src="../assets/imgs/icon/arrow@down.png" alt="">
            </div>
            <div class="middle-border"></div>
            <div class="add-cart-btn" @click="addCart">
                <span>加入购物车</span>
                <img src="../assets/imgs/icon/cart.png" alt="">
            </div>
        </div>
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>
        <div class="basic-info-box">
            <p class="stock" v-show="goods.stock>0">有货</p>
            <p class="stock" v-show="goods.stock<0">无货</p>
            <p class="name">{{goods.name}}</p>
            <p class="price">￥{{goods.price}}</p>
        </div>
        <div class="top-colr"></div>
        <div class="detail-bottom-box">
            <ul class="tabs-box">
                <li :class="tabid == index?'selected':''" v-for="(item,index) in tabs" :key="index" @click="tabid=index">{{item}}</li>
            </ul>
        </div>
        <div class="product-detail-box">
            <div class="product-detail-imgs" v-show="tabid===0">
                <img :src="item.img_url.url" alt="" v-for="(item,index) in goods.imgs" :key="index">
            </div>
            <div class="product-detail-properties" v-show="tabid===1">
                <ul class="properties-item" v-for="(item,index) in goods.properties" :key="index">
                    <li class="properties-name">{{item.name}}</li>
                    <li class="properties-detail">{{item.detail}}</li>
                </ul>
            </div>
            <div class="product-detail-protect" v-show="tabid===2">七天无理由免费退货</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'goods',
    data(){
        return {
            id:'',
            value: '1',
            showPicker: false,
            columns: [1,2,3,4,5,6],
            tabs:['商品详情','产品参数','售后保障'],
            tabid:0,
            goods:[],
            num:0
        }
    },
    mounted(){
        this.getgoods();
        this.goodsNum();
    },
    methods:{
       getgoods(){
           this.id=this.$route.query.id;
           this.axios.get('api/v1/product/' + this.id).then((res)=>{
               this.goods=res.data;
           }).catch((res)=>{
               return res;
           })
       },
       onClickLeft(){
            this.$router.go(-1);
       },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        addCart(){
           var id= this.id;
           var num= this.value;
            this.axios.post('api/v1/cart',{
                goods_id:id,
                goods_num:num
            }).then((res)=>{
                this.goodsNum();
            }).catch((err)=>{
                return err;
            })
        },

        goodsNum(){
            var id= this.id;
            this.axios.post('api/v1/goodsNum',{
                goods_id:id
            }).then((res)=>{
                if(res.data > 0){
                    this.num = res.data;
                }
            }).catch((res)=>{
                return res;
            })
        },

        carts(){
            this.$router.push({path:'/cart'});
        }
    }
}
</script>


<style lang="scss">
@import './../assets/scss/base.scss';
.goods{
    .fixed-btns-box{
        position:fixed;
        top:2rem;
        right:12px;
        img{
            height: 30px;
            width: 30px;
        }
        span{
            font-size: 12px;
            color:white;
            position: absolute;
            background:$colorA;
            right: 30px;
            top:0;
            height: 18px;
            width: 18px;
            line-height: 18px;
            border-radius: 18px;
            text-align: center;
        }
    }
    .detail-topic-img{
        display: flex;
        justify-content: center;
        img{
            width:100%;
        }
    }
    .cart-box{
        width:80%;
        height: 50px;
        margin:30px auto;
        border-radius: 50px;
        background:$colorA;
        color:$colorG;
        display: flex;
        align-items: center;
        .product-counts{
            width:50%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            span{
                font-size: 14px;
                margin:0 10px;
            }
            img{
                width:24px;
                height: 24px;
            }
        }
        .middle-border{
            width:1px;
            height: 30px;
            border-right: 1px #fff dotted;

        }
        .add-cart-btn{
            position: relative;
            flex:1;
            height: 100%;
            display: flex;
            font-size: 12px;
            align-items: center;
            justify-content: center;
            img{
                width:16px;
                height: 16px;
                margin-left:20px;
            }
        }
    }
    .basic-info-box{
        padding:8px 0;
        color:$colorB;
        text-align: center;
        p{
            margin:8px auto;
        }
        .stock{
            font-size: 12px;
        }
        .name{
            font-size: 20px;
        }
        .price{
            font-size: 20px;
        }
    }
    .top-colr{
        background:$colorF;
        height: 20px;
    }
    .detail-bottom-box{
        .tabs-box{
            height: 45px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            li{
                width:33.3%;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .product-detail-box{
        padding-bottom: 10px;
        .product-detail-imgs{
            img{
                width:100%;
                height: 200px;
                float: left;
            }
        }
        .product-detail-properties{
            min-height: 40vh;
            .properties-item{
                display: flex;
                margin:13px 0;
                font-size: 12px;
                .properties-name{
                    width:80px;
                    color:$colorE;
                    text-align: center;
                }
                .properties-detail{
                    flex:1;
                    color:$colorB;
                    padding-right: 20px;
                }
            }
        }
        .product-detail-protect{
            font-size: 14px;
        }
    }
}
</style>